<script>
export default {
  name: 'ai'
};
</script>

<template>
  <frame-view class="ai">
    <div
      :class="$theme==='one'?'topBg':'topBgTwo'" >
      <div style="position:relative;">
        <img v-if="$theme==='one'" src="./image/bg@2x.png" alt="图片" style="width: 360px;height: 360px" />
        <img v-else src="./imageTwo/bg@2x.png" alt="图片" style="width: 360px;height: 360px" />
        <div
          style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);font-weight: 500;font-size: 48px;color: #FFFFFF;">
          96分
        </div>
      </div>
      <van-button round type="info" style="width: 590px;height: 80px;margin-top: 64px">开始检测</van-button>
    </div>
    <div style="display: flex;justify-content: space-between;margin-top: 24px">
      <img src="./image/待优化@2x.png" alt="图片" style="width: 345px;height: 120px" />
      <img src="./image/无需修复@2x.png" alt="图片" style="width: 345px;height: 120px" />
    </div>
    <div
      style="font-weight: 500;padding-bottom: 40px;border-radius: 20px;margin-top: 24px;background-color: #f8e5e5;position: relative">
      <p
        style="font-size: 32px;color: #FFFFFF;height: 70px;line-height: 70px;padding-left: 32px;background-color: #ff1212;border-radius: 20px 20px 0 0">
        设备节点异常检测项</p>
      <p style="padding-left: 32px;font-size: 28px;color: #FF1212;margin-top: 32px">在线时长异常 0h</p>
      <p style="padding-left: 32px;font-size: 28px;color: #00A049;margin-top: 20px">打卡点数正常 283/288</p>
      <img src="./image/位图@2x(1).png" alt="图片"
           style="width: 194px;height: 174px;position: absolute; right: -60px;bottom: -20px;" />
    </div>
    <div
      style="font-weight: 500;padding-bottom: 24px;border-radius: 20px;margin-top: 37px;background-color: #fff;position: relative">
      <p
        style="font-size: 32px;color: #FFFFFF;height: 70px;line-height: 70px;padding-left: 32px;background-color:#1869ff;border-radius: 20px 20px 0 0">
        设备节点异常检测项</p>
      <p style="padding-left: 32px;font-size: 28px;margin-top: 32px">在线时长异常 0h</p>
      <p style="padding-left: 32px;font-size: 28px;color: #999999;margin-top: 20px;width: 494px;line-height: 40px;">
        设备掉线可能是断电或断网,请保持设备正常在线。</p>
      <img src="./image/位图@2x (2).png" alt="图片"
           style="width: 114px;height: 118px;position: absolute; right: 26px;bottom: 29px;" />
    </div>

    <div style="font-weight: 500;border-radius: 20px;margin-top: 24px;background-color: #ffffff;padding: 4px 24px 24px">
      <p style="display: flex;align-items: center;justify-content: space-between;margin-top: 20px">
        <span>网络状态</span>
        <img src="./image/形状@2x.png" alt="图片" style="width: 32px;height: 32px" />
      </p>
      <p style="display: flex;align-items: center;justify-content: space-between;margin-top: 20px">
        <span>Cpu状态</span>
        <img src="./image/形状@2x.png" alt="图片" style="width: 32px;height: 32px" />
      </p>
      <p style="display: flex;align-items: center;justify-content: space-between;margin-top: 20px">
        <span>内存状态</span>
        <img src="./image/形状@2x.png" alt="图片" style="width: 32px;height: 32px" />
      </p>
      <p style="display: flex;align-items: center;justify-content: space-between;margin-top: 20px">
        <span>磁盘状态</span>
        <img src="./image/形状@2x.png" alt="图片" style="width: 32px;height: 32px" />
      </p>
    </div>
    <div style="height: 50px"></div>
  </frame-view>

</template>

<style scoped lang="scss">
.topBg {
  width: 710px;
  height: 664px;
  background: linear-gradient(180deg, #FFFFFF 0%, #D7E7FF 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 20px;
}
.topBgTwo {
  width: 710px;
  height: 664px;
  background: linear-gradient( 180deg, #FFFFFF 0%, #D7FFFC 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 20px;
}

</style>
